【CSS】ベンダープレフィックス - ブラウザの接頭辞

CSSのベンダープレフィックスについて解説します。

CSSとWebブラウザ

一部のCSSプロパティはWebブラウザによって動作が異なる場合があります。

例えば、次のテキストを装飾するtext-decorationプロパティはChromeは対応していますが、Safariでは非対応です。
（2024/01/22 時点）

<style>
p {
    text-decoration: underline red;
}
</style>
 
<p>CSS : Cascading Style Sheets</p>

CSSの動作は各Webブラウザの仕様や開発方針に依存しており、大部分は共通しますが、細部で違いが発生することがあります。

ただし、一部のCSSプロパティにおいては、このような違いを『ベンダープレフィックス』によって解決できます。

ベンダープレフィックス

ベンダープレフィックスは“CSSプロパティの接頭辞”です。

ベンダープレフィックスによって、試験導入プロパティを利用することが可能となります。

使い方は次のように、プロパティ名の先頭に接頭辞を付与します。

-接頭辞-プロパティ名

-接頭辞-の部分はWebブラウザによって異なります。

先ほどのtext-decorationプロパティはベンダープレフィックスを利用することで、Safariで動作させることが可能です。

<style>
p {
    text-decoration: underline red;
    ___ih_hl_start
    -webkit-text-decoration: underline red;
    ___ih_hl_end
}
</style>
 
<p>CSS : Cascading Style Sheets</p>

このように動作が異なる環境でもベンダープレフィックスによって、同じような仕様感にすることができます。

複数環境対応

現代では数多のWebブラウザが存在し、常にアップデートされ続けているため、各動作の違いを全て記憶するのは困難です。

そのため、AppやWEBサイトを複数環境向けにリリースする場合は、各環境における動作テストが重要となります。